<template>
  <div>首页</div>
  <c-icon color="red" size="20">
    <AccessibilitySharp />
  </c-icon>
  <c-icon color="yellow" size="20">
    <AccessibilitySharp />
  </c-icon>
  <div>{{ selectedKeys }}---</div>
  <c-tree
    v-model:selected-keys="selectedKeys"
    label-field="label"
    key-field="key"
    :on-load="handleOnload"
    selectable
    multiple
    :data="data">
    <template #default="{ node }">{{ node.label }}222</template>
  </c-tree>
</template>
<script setup lang="ts">
  import { TreeKey, TreeOption } from '@cat-ui/components/tree';
  import { AccessibilitySharp } from '@vicons/ionicons5';
  import { ref } from 'vue';

  /* const data = [
    {
      id: '1',
      name: '1',
      disabled: true,
      children: [
        {
          id: '1-1',
          name: '1-1',
          children: [
            {
              id: '1-1-1',
              name: '1-1-1',
              children: [],
            },
          ],
        },
        {
          id: '1-2',
          name: '1-2',
          children: [
            {
              id: '1-2-1',
              name: '1-2-1',
              children: [],
            },
            {
              id: '1-2-2',
              name: '1-2-2',
              children: [],
            },
          ],
        },
      ],
    },
    {
      id: '2',
      name: '2',
      children: [
        {
          id: '2-1',
          name: '2-1',
          children: [
            {
              id: '2-1-1',
              name: '2-1-1',
              children: [],
            },
          ],
        },
        {
          id: '2-2',
          name: '2-2',
          children: [
            {
              id: '2-2-1',
              name: '2-2-1',
              children: [],
            },
            {
              id: '2-2-2',
              name: '2-2-2',
              children: [],
            },
          ],
        },
      ],
    },
  ]; */

  function createData() {
    return [
      {
        label: nextLabel(),
        key: 1,
        isLeaf: false, // 这里isLeaf 为false 表示点击的时候动态的加载子节点
      },
      {
        label: nextLabel(),
        key: 2,
        isLeaf: false,
      },
    ];
  }

  const data = ref(createData());
  function nextLabel(currentLabel?: string | number): string {
    if (!currentLabel) return 'Out of Tao, One is born';
    if (currentLabel === 'Out of Tao, One is born') return 'Out of One, Two';
    if (currentLabel === 'Out of One, Two') return 'Out of Two, Three';
    if (currentLabel === 'Out of Two, Three') {
      return 'Out of Three, the created universe';
    }
    if (currentLabel === 'Out of Three, the created universe') {
      return 'Out of Tao, One is born';
    }
    return '';
  }
  const handleOnload = (node: TreeOption) => {
    return new Promise<TreeOption[]>((resolve) => {
      setTimeout(() => {
        resolve([
          // 这个数据会作为当前展开的node的children属性
          {
            label: nextLabel(node.label),
            key: node.key + nextLabel(node.label),
            isLeaf: false,
          },
        ]);
      }, 1000);
    });
  };

  const selectedKeys = ref<TreeKey[]>([]);
</script>
<style scoped></style>
